<template>
	<view class="content">
		<el-form :model="tagInfo" ref="tagPrintFormRef" label-position="top">
			<!-- <el-form-item v-if="!isAdd">
				<el-row type="flex" justify="end">
					<el-button type="default" @click="editDetails">
						<Icon class="mr-5rpx" icon="ep:edit" />{{ $t(`global.edit`) }}
					</el-button>
					<el-button v-if="!isAdd" type="danger" @click="deleteTagPrint">
						<Icon class="mr-5rpx" icon="ep:delete" />{{ $t(`global.delete`) }}
					</el-button>
				</el-row>
			</el-form-item> -->
			<el-row :gutter="10">
				<el-col :span="24">
					<el-form-item prop="id" :label="$t(`tagPrintDetail.printBatch`)">
						<el-text style="font-size: 24px; font-weight: 500">{{ tagInfo.id }}</el-text>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item :label="$t(`tagPrintDetail.printStyle`)">
						<el-select v-model="tagInfo.printstyle" clearable style="width: 100%" :disabled="!isEdit && !isAdd"
							:placeholder="$t(`tagPrintDetail.printStyle`)">
							<el-option v-for="dict in getIntDictOptions(DICT_TYPE.HKB_PRINT_STYLE)" :key="dict.value"
								:label="dict.label" :value="dict.value" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item :label="$t(`tagPrintDetail.printSize`)">
						<el-select v-model="tagInfo.printsize" clearable style="width: 100%" :disabled="!isEdit && !isAdd"
							:placeholder="$t(`tagPrintDetail.printSize`)">
							<el-option v-for="dict in getIntDictOptions(DICT_TYPE.HKB_PRINT_SIZE)" :key="dict.value" :label="dict.label"
								:value="dict.value" />
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-form-item :label="$t(`tagPrintDetail.remake`)">
				<span v-if="!isEdit && !isAdd">{{ tagInfo.memo }}</span>
				<el-input v-model="tagInfo.memo" v-else />
			</el-form-item>
			<el-form-item :label="$t(`tagPrintDetail.productManage`)">
				<proList v-model="tagInfo.list" :readonly="!isAdd && !isEdit" />
			</el-form-item>
		</el-form>
		<el-row type="flex" justify="center" class="guding">
			<el-button type="primary" @click="editDetails" v-if="!isEdit">{{ $t(`global.edit`) }}</el-button>
			<el-button type="primary" v-if="isEdit || isAdd" @click="submitForm">{{ $t(`global.verify`) }}</el-button>
			<!-- <el-button type="primary" v-if="!isEdit && !isAdd" v-print="printObj" @click="printPro">打印</el-button> -->
			<el-button @click="cacel">{{ $t(`global.cancel`) }}</el-button>
		</el-row>

		<uni-popup ref="popup" background-color="#fff" border-radius="10px 10px 0 0">
		<uni-row class="demo-uni-row">
			<uni-col :span="24" style="margin-top: 10px;">
				<el-button type="info" :icon="Delete" text @click="deleteTagPrint">&nbsp&nbsp&nbsp&nbsp{{
					$t(`global.delete`)
					}}</el-button>
			</uni-col>
		</uni-row>
	</uni-popup>

	</view>
</template>
<script lang="ts" setup>
import { Delete, Share, Plus } from '@element-plus/icons-vue'
import { FormInstance } from 'element-plus'
import * as tagPrintApi from '@/service/api/hkb/tagPrint/index'
import proList from '@/pages/hkb/components/proList/index.vue'
import { ref } from 'vue'
import type { TagPrintVO, ColumnVO, goodsVO } from '../types'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import Storage from "@/modal/useStorage";

import { Navigate } from '@/utils';
import i18n from '@/main'


const popup = ref()
onNavigationBarButtonTap(async (e) => {
	popup.value.open('bottom');
})

onReady(() => {
	uni.setNavigationBarTitle({
		title: i18n.global.locale === 'zh' ? '标签打印详情' : 'TAGPRINTDETAIL'
	});
})

onLoad(() => {
	const tagPrintDetail = Storage.get('tagPrintDetail')
	isAdd.value = tagPrintDetail.isAdd
	isEdit.value = tagPrintDetail.isEdit
	if (isAdd.value) {
		uni.setNavigationBarTitle({
			title: i18n.global.locale === 'zh' ? '新增标签打印' : 'ADDTAGPRINT'
		})
		Storage.set('selectGoods', [])
	} else {
		uni.setNavigationBarTitle({
			title: i18n.global.locale === 'zh' ? '标签打印详情' : 'TAGPRINTDETAIL'
		});
		Storage.set('selectGoods', tagPrintDetail.tagPrint.list)
	}
	if (tagPrintDetail.tagPrint) {
		tagInfo.value = tagPrintDetail.tagPrint
	}
})

const message = useMessage() // 消息弹窗

// defineOptions({ name: 'TagPrint' })

const isAdd = ref(false) //是否新增
const isEdit = ref(false) //是否编辑
const loading = ref(false) // 列表的加载中
const buttonLoading = ref(false) //按钮的加载
const total = ref(0) // 列表的总页数
// 列表的数据
const list = ref<TagPrintVO[]>([])
const fileDetailList = ref([])
const accessDetail = ref(false)
const isPrint = ref(false)

const printObj = {
	id: 'printTable',
	// preview:true, // 打印预览
	// previewTitle: '打印预览',
	popTitle: '商品二维码',
	extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
	extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
	beforeOpenCallback(vue) {
		console.log('打开之前')
		console.log(isPrint.value)
	},
	openCallback(vue) {
		console.log('执行了打印')
	},
	closeCallback(vue) {
		console.log('关闭了打印工具')
		isPrint.value = false
	}
}

//商品字段
const allCol = ref([
	{ label: '打印批次', prop: 'id', width: '' },
	{ label: '打印样式', prop: 'printstyle', width: '' },
	{ label: '打印尺寸', prop: 'printsize', width: '' },
	{ label: '备注说明', prop: 'memo', width: '' },
	{ label: '商品管理', prop: 'list', width: '' }
])

const checkCol = ref<ColumnVO[]>([])
const checked = ref([])

const queryParams = ref({
	pageNum: 1,
	pageSize: 10
})

const tagPrintFormRef = ref<FormInstance>()
const tagInfo = ref({
	id: '',
	printstyle: '',
	printsize: '',
	memo: '',
	productids: '',
	list: []
})
const tagInfoInitForm = ref({
	id: '',
	printstyle: '',
	printsize: '',
	memo: '',
	productids: '',
	list: []
})

const getList = async () => {
	const res = await tagPrintApi.getList(queryParams.value)
	console.log(res)
	if (res.list.length > 0) {
		list.value = res.list
		total.value = res.total
	}
}


//提交
const submitForm = async () => {
	tagInfo.value.productids = tagInfo.value.list.map((item: goodsVO) => item.id).join(';')
	tagPrintFormRef.value?.validate(async (valid: boolean) => {
		if (valid) {
			buttonLoading.value = true
			if (tagInfo.value.id) {
				await tagPrintApi.editPrint(tagInfo.value).finally(() => (buttonLoading.value = false))
			} else {
				await tagPrintApi.addPrint(tagInfo.value).finally(() => (buttonLoading.value = false))
			}
			cacel()
		}
	})
}

//删除打印
const deleteTagPrint = async () => {
	try {
		// 二次确认
		await message.confirm('确认要立即删除这条数据吗?', '温馨提示')
		// 提交执行
		tagPrintApi.deletePrint(tagInfo.value.id).then((res) => {
			if (res) {
				message.success('删除成功')
			} else {
				message.warning('删除失败')
			}
		}).finally(() => (cacel()))
	} catch (error) { }
}


//详情
const tagPrintDetails = (row: TagPrintVO) => {
	isAdd.value = false
	isEdit.value = false
	tagInfo.value = JSON.parse(JSON.stringify(row))
}

/** 编辑详情 **/
const editDetails = (row) => {
	isEdit.value = true
	isAdd.value = false
	tagInfo.value = JSON.parse(JSON.stringify(row))
}

//显示新增
const showAdd = async () => {
	isAdd.value = true
	isEdit.value = false
	tagInfo.value = JSON.parse(JSON.stringify(tagInfoInitForm.value))
}

//关闭弹窗
const cacel = () => {
	Navigate.to('/pages/hkb/tagPrint/tagPrint')
}

/** 打印 **/
const printPro = () => {
	isPrint.value = true
}

/** 激活时 */
onActivated(() => {
	getList()
})

/** 初始化 **/
onMounted(async () => {
	await getList()
	checkCol.value = JSON.parse(JSON.stringify(allCol.value))
	checked.value = JSON.parse(JSON.stringify(allCol.value.map((item) => item.label)))
})
</script>
<style lang="scss" scoped>
.content {
	background: #fff;
	padding: 0 20rpx;

	.title {
		font-size: 40rpx;
		margin: 20rpx 10rpx;
	}
}

.guding {
	position: fixed;
	bottom: 10px;
	right: 50px;
}

::v-deep .uni-popup__wrapper {
	padding: 10px;
}
</style>
